<template name="teacherItem">
	<view class="itemBox" @tap="toPage" data-url="teacherDetail" :data-id="tcItem.id" :data-sid="tcItem.store.id">
		<image :src="tcItem.img"></image>
		<view class="teacherInfo">
			<view class="row">
				<text class="tName">{{tcItem.name}}</text>
				<text class="workAge">{{tcItem.workAge}}年教龄</text>
			</view>
			<view class="row sk">已授{{tcItem.score}}节课</view>
			<view class="row tagBox">
				<text v-for="(item,index) in tcItem.labels" :key="index">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'teacherItem', //组件名称
		// 传递参数
		props: {
			tcItem: {
				type: Object,
				default: null
			}
		},
		// 组件参数
		data() {
			return {
				data1: 'value1'
			}
		},
		// 组件方法
		methods: {
			mtd1() {

			}
		}
	}
</script>

<style lang="less" scoped>
	.itemBox {
		display: flex;
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding: 34upx 50upx;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		margin-bottom: 20upx;
		image {
			width: 170upx;
			height: 170upx;
			border-radius: 50%;
			margin-right: 50upx;
			flex-shrink: 0;
		}

		.teacherInfo {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.row {
				display: flex;
				font-size: 32upx;
				width: 100%;
				color: #202932;

				.tName {
					margin-right: 40upx;
				}
			}

			.sk {
				font-size: 28upx;
			}

			.tagBox {
				text {
					font-size: 24upx;
					height: 42upx;
					background-color: #f6f6f6;
					border-radius: 21upx;
					padding: 0 20upx;
					line-height: 42upx;
					color: #202932;
					margin-right: 20upx;
				}
			}
		}
	}
</style>
